<template>
    <div>
        <el-card style="margin-bottom: 5px">
            <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名字进行查询"
                prefix-icon="Search"></el-input>
            <el-button type="primary" @click="load">查 询</el-button>
            <el-button type="warning" @click="reset">重 置</el-button>
        </el-card>
    </div>

    <div>
        <el-card style="margin-bottom: 5px;" v-if="data.departmentId == 4 || data.departmentId == null || data.positionId == 1">
            <el-button type="primary" @click="add" >加 入</el-button>
            <el-button type="warning" @click="deBatch">批 量 辞 退</el-button>
        </el-card>
    </div>

    <div>
        <el-table :data="data.tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="名字" />
            <el-table-column prop="sex" label="性别">
                <template #default="scope">
                    <el-tag type="primary">{{ scope.row.sex == 1 ? "男" : "女" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="position" label="职位" >
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.positionId === 1">管理员</el-tag>
                    <el-tag type="primary" v-if="scope.row.positionId === 2">总经理</el-tag>
                    <el-tag type="primary" v-if="scope.row.positionId === 3">经理</el-tag>
                    <el-tag type="primary" v-if="scope.row.positionId === 4">员工</el-tag>
                </template>
            </el-table-column>
            <el-table-column  prop="prop" label="所属部门">
                <el-tag type="primary">生产部门</el-tag>
            </el-table-column>
            <el-table-column prop="wage" label="月工资" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="createDate" label="入门时间" >
                <template #default="scope">
                    {{ scope.row.createDate.substring(0, 11) }}
                </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="修改时间" >
                <template #default="scope">
                    <span v-if="scope.row.updateDate">{{ maskUpdateDate(scope.row.updateDate) }}</span>
                </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="prop" label="操作">
                <template #default="scope">
                    <el-button type="primary" v-if="data.departmentId == 4 || data.departmentId == null || data.positionId == 1" @click="handleUpdate(scope.row)">修 改</el-button>
                    <el-button type="primary">辞 职</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="demo-pagination-block">
        <div style="margin-top: 15px"></div>
        <el-pagination @current-change="load" @size-change="load" v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize" :page-sizes="[8, 10, 12, 14]" background
            layout="total, sizes, prev, pager, next, jumper" :total="data.total" />
    </div>

    <!-- 对话框 -->
    <el-dialog v-model="data.centerDialogVisible" :title="data.title" width="700" align-center>
        <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px">
            <el-form-item label="姓名" prop='name'>
                <el-input v-model="data.form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="data.form.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop='positionId'>
                <el-radio-group v-model="data.form.positionId">
                    <el-radio :value="3" border>经理</el-radio>
                    <el-radio :value="4" border>员工</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所属部门" prop='departmentId'>
                <el-select v-model="data.form.departmentId" placeholder="请选择你的所属部门">
                    <el-option label="生产部门" :value="1"></el-option>
                    <el-option label="销售部门" :value="2"></el-option>
                    <el-option label="财务部门" :value="3"></el-option>
                    <el-option label="人事部门" :value="4"></el-option>
                    <el-option label="采购部门" :value="5"></el-option>
                    <el-option label="行政部门" :value="6"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="data.form.sex">
                    <el-radio value="1" label="男"></el-radio>
                    <el-radio value="2" label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="工资" prop='wage'>
                <el-input-number style="width: 260px" v-model="data.form.wage" :min="100" :max="50000" />
            </el-form-item>
            <el-form-item label="密码" prop='password'>
                <el-input v-model="data.form.password"  type="password"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="data.centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">确定</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import { userProduct, userProductAdd, userProductUpdateById } from "@/api/user";
import { useUserStore } from "@/stores/user";
import { ElMessage } from "element-plus";
import { nextTick, onMounted, reactive, ref } from "vue";


//优化时间显示
const maskUpdateDate = (updateDate) => {
    return updateDate ? updateDate.substring(0,11) : ''
}

const data = reactive({
    tableData: [], //生产经理 总信息
    pageNum: 1,
    pageSize: 8,
    total: 0,
    name: '',
    form: {},
    centerDialogVisible: false,
    title: null,

    rules: {
        name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        positionId: [
            { required: true, message: '请选择职业', trigger: 'blur' }
        ],
        departmentId: [
            { required: true, message: '请选择所属部门', trigger: 'blur' }
        ],
        wage: [
            { required: true, message: '请输入工资', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入账号密码', trigger: 'blur' }
        ],

    },

    departmentId: null,
    positionId: null,

})

nextTick({
    
})

const userObj = useUserStore()
console.log(userObj.user)
data.departmentId = userObj.user.departmentId
data.positionId = userObj.user.positionId





const formRef = ref()

//重置函数
const reset = () => {
    data.name = null
    load()  
}

//输入 添加 弹窗的保存功能
const save = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            data.form.id ? updateSave() : addSave()
        } else {
            ElMessage.error('表单验证失败');
            return false;
        }
    })
}

const add = () => {
    data.title = '添 加'
    data.centerDialogVisible = true
    data.form = {}
    formRef.value.resetFields() // 防止点击第二次出现表单验证提示框
}

//添加功能的函数
const addSave = async () => {
    await userProductAdd(data.form).then(res => {
        data.centerDialogVisible = false
        if(res.data.code == '200'){
            ElMessage.success('操作成功')
        }else{
            ElMessage.error('操作失败111')
        }
    })    
}

//修改功能函数
const updateSave = async () => {
    await userProductUpdateById(data.form).then(res => {
        data.centerDialogVisible = false
        if(res.data.code == '200'){
            ElMessage.success('操作成功')
            load()
        }else{
            ElMessage.error('操作失败')
        }
    })
}

// wjc 编辑方法函数
const handleUpdate = (row) => {
    data.form.id = row.id
    data.centerDialogVisible = true
    data.title = '修改'
    data.form = JSON.parse(JSON.stringify(row))
}

const load = async () => {
    await userProduct(data.pageNum, data.pageSize, data.name).then((res) => {
        data.tableData = res.data.data.list
        data.total = res.data.data.total
    })
}

onMounted(() => {
    load()
})
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>